<template>
  <div class="register">
    <scroll class="content">
      <transition name="why" mode="out-in">
        <register-item
          v-if="isShowLogin"
          @resetLoginForm="resetLoginForm"
          ref="login"
        ></register-item>
        <register-login @loginClick="loginClick" v-else></register-login>
      </transition>
    </scroll>
  </div>
</template>

<script>
import RegisterItem from "./childComps/RegisterItem.vue";
import RegisterLogin from "./childComps/RegisetrLogin.vue";

import Scroll from "components/common/scroll/Scroll";

export default {
  components: {
    RegisterItem,
    Scroll,
    RegisterLogin,
  },
  data() {
    return {
      isShowLogin: false,
    };
  },
  created() {
    // console.log("chx");
  },
  methods: {
    loginClick() {
      // console.log("登录");
      this.isShowLogin = !this.isShowLogin;
    },
    resetLoginForm() {
      console.log("重置");
      // this.$refs.login.$refs.wrapper.style.animation = "bounce 3s";
    },
  },
};
</script>

<style scoped>
.register {
  height: 100vh;
  background: url("../../assets/img/regisetr/regisetrbg.jpg");
  background-size: cover;
  overflow: hidden;
  position: relative;
}
.content {
  height: 100vh;
  background: url("../../assets/img/regisetr/regisetrbg.jpg");
  background-size: cover;
  position: absolute;
  overflow: hidden;
  z-index: 999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.why-enter-active {
  animation: bounce 1s ease;
}

/* reverse 反转 */
.why-leave-active {
  animation: bounce 2s ease reverse;
}

@keyframes bounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
